// import guoBo from '@/assets/images/guobo.png'
// import guoBo2 from '@/assets/images/gb2.png'
// import guoBo1r from '@/assets/images/guobo1r.png'
// import guoBo2r from '@/assets/images/guobo2r.png'
import guoBo1r from '@/assets/images/newGb/list.png'
import guoBo from '@/assets/images/newGb/details.png'

import qrCode from 'qrcode'
import fontURL from '../../../assets/font/SourceHanSerif.ttf'

export class CanvasGenerateImage {
    constructor(
        { docNum, orderNum, orderTime, orderAmount = '', qrCodeData, name, location = '', status = '', admissionTime = '', iphoneNum = null },
        row,
    ) { 
        this.multiples = 3
        // 行数据
        this.row = row
        // 身份证
        this.docName = '身份证'
        // 身份证号码
        this.docNum = docNum
        // 订单编号
        this.orderNum = orderNum
        // 下单时间
        this.orderTime = orderTime || '2024-07-14 17:00:35'
        // 订单金额
        this.orderAmount = orderAmount
        // 二维码数据
        this.qrCodeData = qrCodeData
        // 名称
        this.name = name
        // 位置
        this.location = location
        // 状态
        this.status = status
        // 入馆时间
        this.admissionTime = admissionTime
        // 手机号码
        this.iphoneNum = iphoneNum
        this.options = [
            // {
            //     prop: 'orderNum',
            //     x: 46,
            //     y: 138,
            //     style: {
            //         fontSize: 19,
            //         color: 'rgba(0, 0, 0, 1)',
            //         letterSpacing: '0.8px',
            //     },
            // },
            // {
            //     prop: 'orderTime',
            //     x: 260,
            //     y: 198,
            //     style: {
            //         fontSize: 19,
            //         color: 'rgba(23, 24, 25, .8)',
            //     },
            // },
            {
                prop: 'name',
                x: 48,
                y: 321,
                style: {
                    fontSize: 21,
                    fontWeight: 'bold',
                    color: 'rgba(23, 24, 25, .8)',
                },
            },
            {
                prop: 'docNum',
                x: 48,
                y: 390,
                style: {
                    fontSize: 18,
                    color: 'rgba(23, 24, 25, .8)',
                },
            },
            // {
            //     prop: 'admissionTime',
            //     x: 35,
            //     y: 755,
            //     style: {
            //         fontSize: 16,
            //         color: 'rgba(0, 0, 0, 0.6)',
            //         letterSpacing: '0.8px',
            //     },
            // },
            // {
            //     prop: 'firstGroupName',
            //     x: 37,
            //     y: 823,
            //     style: {
            //         fontSize: 16,
            //         color: 'rgba(0, 0, 0, 0.8)',
            //         letterSpacing: '0.8px',
            //     },
            // },
        ]
        this.topOptions1 = [
            {
                prop: 'orderNum',
                x: 114,
                y: 799,
                style: {
                    fontSize: 16,
                    color: '#3e3e3e',
                    letterSpacing: '1.5px',
                },
            },
            // {
            //     prop: 'orderTime',
            //     x: 261,
            //     y: 212,
            //     style: {
            //         fontSize: 20,
            //         color: 'rgba(61, 61, 61, .9)',
            //     },
            // },
            // {
            //     prop: 'iphoneNum',
            //     x: 351,
            //     y: 282,
            //     style: {
            //         fontSize: 20,
            //         color: 'rgba(61, 61, 61, .9)',
            //     },
            // },
        ]
        this.groupOptions1 = [
            {
                prop: 'name',
                x: 136,
                y: 448,
                style: {
                    fontSize: 18,
                    color: '#4f4f4f',
                },
            },
            {
                prop: 'docNum',
                x: 136,
                y: 523,
                style: {
                    fontSize: 18,
                    color: '#4f4f4f',
                    letterSpacing: '1px',
                },
            },
            {
                prop: 'admissionTime',
                x: 136,
                y: 561,
                style: {
                    fontSize: 20,
                    color: '#4f4f4f',
                    letterSpacing: '1px',
                },
            },
            // {
            //     prop: 'status',
            //     x: 388,
            //     y: 722,
            //     style: {
            //         fontSize: 15,
            //         color: 'rgba(105, 105, 105, .6)',
            //         letterSpacing: '1px',
            //     },
            // },
        ]
        // this.topOptions2 = [
        //     {
        //         prop: 'orderNum',
        //         x: 48,
        //         y: 146,
        //         style: {
        //             fontSize: 20,
        //             color: 'rgba(63, 63, 63, 1)',
        //             fontWeight: 'bold',
        //             letterSpacing: '1.5px',
        //         },
        //     },
        //     {
        //         prop: 'orderTime',
        //         x: 260,
        //         y: 210,
        //         style: {
        //             fontSize: 18,
        //             color: 'rgba(61, 61, 61, .9)',
        //         },
        //     },
        //     {
        //         prop: 'iphoneNum',
        //         x: 343,
        //         y: 296,
        //         style: {
        //             fontSize: 18,
        //             color: 'rgba(61, 61, 61, .9)',
        //         },
        //     },
        // ]
        // this.groupOptions2 = [
        //     [
        //         {
        //             prop: 'name',
        //             x: 40,
        //             y: 580,
        //             style: {
        //                 fontSize: 16,
        //                 color: 'rgba(105, 105, 105, .8)',
        //             },
        //         },
        //         {
        //             prop: 'docNo',
        //             x: 40,
        //             y: 636,
        //             style: {
        //                 fontSize: 16,
        //                 color: 'rgba(105, 105, 105, .6)',
        //                 letterSpacing: '1px',
        //             },
        //         },
        //         {
        //             prop: 'admissionTime',
        //             x: 40,
        //             y: 660,
        //             style: {
        //                 fontSize: 16,
        //                 color: 'rgba(105, 105, 105, .6)',
        //                 letterSpacing: '1px',
        //             },
        //         },
        //         {
        //             prop: 'status',
        //             x: 402,
        //             y: 656,
        //             style: {
        //                 fontSize: 14,
        //                 color: 'rgba(105, 105, 105, .6)',
        //                 letterSpacing: '1px',
        //             },
        //         },
        //     ],
        //     [
        //         {
        //             prop: 'name',
        //             x: 40,
        //             y: 740,
        //             style: {
        //                 fontSize: 16,
        //                 color: 'rgba(105, 105, 105, .8)',
        //             },
        //         },
        //         {
        //             prop: 'docNo',
        //             x: 40,
        //             y: 795,
        //             style: {
        //                 fontSize: 16,
        //                 color: 'rgba(105, 105, 105, .6)',
        //                 letterSpacing: '1px',
        //             },
        //         },
        //         {
        //             prop: 'admissionTime',
        //             x: 40,
        //             y: 820,
        //             style: {
        //                 fontSize: 16,
        //                 color: 'rgba(105, 105, 105, .6)',
        //                 letterSpacing: '1px',
        //             },
        //         },
        //         {
        //             prop: 'status',
        //             x: 402,
        //             y: 816,
        //             style: {
        //                 fontSize: 14,
        //                 color: 'rgba(105, 105, 105, .6)',
        //                 letterSpacing: '1px',
        //             },
        //         },
        //     ],
        // ]
        // this.topOptions3 = [
        //     {
        //         prop: 'orderNum',
        //         x: 46,
        //         y: 145,
        //         style: {
        //             fontSize: 20,
        //             color: 'rgba(27, 26, 27, .8)',
        //             fontWeight: 'bold',
        //             letterSpacing: '1.5px',
        //         },
        //     },
        //     {
        //         prop: 'orderTime',
        //         x: 266,
        //         y: 202,
        //         style: {
        //             fontSize: 18,
        //             color: 'rgba(61, 61, 61, .9)',
        //         },
        //     },
        //     {
        //         prop: 'iphoneNum',
        //         x: 343,
        //         y: 280,
        //         style: {
        //             fontSize: 18,
        //             color: 'rgba(61, 61, 61, .9)',
        //         },
        //     },
        // ]
        // this.groupOptions3 = [
        //     [
        //         {
        //             prop: 'name',
        //             x: 35,
        //             y: 535,
        //             style: {
        //                 fontSize: 16,
        //                 color: 'rgba(27, 26, 27, .8)',
        //             },
        //         },
        //         {
        //             prop: 'docNo',
        //             x: 35,
        //             y: 588,
        //             style: {
        //                 fontSize: 16,
        //                 color: 'rgba(27, 26, 27, .6)',
        //                 letterSpacing: '1px',
        //             },
        //         },
        //         {
        //             prop: 'admissionTime',
        //             x: 35,
        //             y: 610,
        //             style: {
        //                 fontSize: 16,
        //                 color: 'rgba(27, 26, 27, .6)',
        //                 letterSpacing: '1px',
        //             },
        //         },
        //     ],
        //     [
        //         {
        //             prop: 'name',
        //             x: 35,
        //             y: 686,
        //             style: {
        //                 fontSize: 16,
        //                 color: 'rgba(27, 26, 27, .8)',
        //             },
        //         },
        //         {
        //             prop: 'docNo',
        //             x: 35,
        //             y: 735,
        //             style: {
        //                 fontSize: 16,
        //                 color: 'rgba(27, 26, 27, .6)',
        //                 letterSpacing: '1px',
        //             },
        //         },
        //         {
        //             prop: 'admissionTime',
        //             x: 35,
        //             y: 756,
        //             style: {
        //                 fontSize: 16,
        //                 color: 'rgba(27, 26, 27, .6)',
        //                 letterSpacing: '1px',
        //             },
        //         },
        //     ],
        //     [
        //         {
        //             prop: 'name',
        //             x: 35,
        //             y: 828,
        //             style: {
        //                 fontSize: 16,
        //                 color: 'rgba(27, 26, 27, .8)',
        //             },
        //         },
        //     ],
        // ]
    }

    createCanvas() {
        const canvas = document.createElement('canvas')
        return new Promise((resolve) => {
            // 加载字体
            const fontFace = new FontFace('Source Han Serif', `url(${fontURL})`)
            document.fonts.add(fontFace)
            fontFace.load().then((fontRes) => {
                document.fonts.ready.then(() => {
                    this.createQrCode().then((qrCodeBase64) => {
                        const ctx = canvas.getContext('2d')
                        const canvasW = 500 * this.multiples
                        canvas.width = canvasW
                        const img = new Image()
                        img.src = guoBo

                        const that = this
                        img.onload = function () {
                            const imgW = img.width * that.multiples
                            const imgH = img.height * that.multiples
                            const aspectRatio = imgW / imgH

                            const dynH = canvasW / aspectRatio

                            canvas.height = dynH
                            ctx.drawImage(img, 0, 0, canvasW, dynH)
                            that.options.forEach((item, index) => {
                                const { x, y, prop, style } = item
                                if (that.row.touristList.length > 1) {
                                    if (prop === 'firstGroupName') {
                                        const value = that.row.touristList.find((item) => item.id !== that.id).name
                                        that.createBox(ctx, x * that.multiples, y * that.multiples, value, style)
                                    } else {
                                        that.createBox(ctx, x * that.multiples, y * that.multiples, that[prop], style)
                                    }
                                } else {
                                    if (prop === 'firstGroupName') {
                                        that.createBox(ctx, x * that.multiples, y * that.multiples, '', style)
                                    } else {
                                        that.createBox(ctx, x * that.multiples, y * that.multiples, that[prop], style)
                                    }
                                }
                            })

                            const img2 = new Image()
                            img2.src = qrCodeBase64
                            img2.onload = function () {
                                ctx.drawImage(img2, 156 * that.multiples, 446 * that.multiples, 190 * that.multiples, 190 * that.multiples)
                                resolve({ base64: canvas.toDataURL('image/jpeg'), name: that.name + '(详情)' })
                            }
                        }
                    })
                })
            })
        })
    }
    createQrCode() {
        return qrCode.toDataURL(this.qrCodeData, {
            margin: 1,
            height: 260 * this.multiples,
            width: 260 * this.multipless,
            scale: 200,
            color: {
                dark: '#000',
            },
        })
    }
    createCanvas2() {
        const canvas = document.createElement('canvas')

        return new Promise((resolve) => {
            // 加载字体
            const fontFace = new FontFace('Source Han Serif', `url(${fontURL})`)
            document.fonts.add(fontFace)
            fontFace.load().then(() => {
                document.fonts.ready.then(
                    (fontRes) => {
                        const ctx = canvas.getContext('2d')
                        const canvasW = 500 * this.multiples
                        canvas.width = canvasW
                        const img = new Image()
                        img.src = this.handleJudgingImage(this.row.touristList)
                        const that = this

                        img.onload = function () {
                            const imgW = img.width * that.multiples
                            const imgH = img.height * that.multiples
                            const aspectRatio = imgW / imgH

                            const dynH = canvasW / aspectRatio

                            canvas.height = dynH

                            ctx.drawImage(img, 0, 0, canvasW, dynH)
                            // 判断人数
                            const users = that.row.touristList
                            that.handleJudgingPotions(users, ctx)
                            resolve({ base64: canvas.toDataURL('image/jpeg'), name: that.name + '(列表)' })
                        }
                    },
                    (err) => {
                        console.log(err, 'err')
                    },
                )
            })
        })
    }

    createBox(ctx, x, y, v, style = null) {
        const {
            fontSize,
            color,
            fontWeight = '',
            letterSpacing,
        } = style || {
            fontSize: 20,
            color: '#5f5f5f',
        }
        ctx.beginPath()
        ctx.font = `${fontWeight} ${fontSize * this.multiples}px Source Han Serif`
        ctx.fillStyle = color
        if (letterSpacing) {
            ctx.letterSpacing = letterSpacing
        }
        ctx.fillText(v, x, y)
    }
    // 判断人数
    handleJudgingImage(users) {
        if (!users.length) return console.log('分组人员为空')
        // switch (users.length) {
        //     case 1:
        //         return guoBo1r
        //     case 2:
        //         return guoBo2r
        //     default:
        //         return guoBo2
        // }
        return guoBo1r
    }

    handleJudgingPotions(users, ctx) {
        if (!users.length) return console.log('分组人员为空')
        this.topOptions1.forEach((item, index) => {
            const { x, y, prop, style } = item
            this.createBox(ctx, x * this.multiples, y * this.multiples, this[prop], style)
        })
        this.groupOptions1.forEach(item => {
            const { x, y, prop, style } = item
            this.createBox(ctx, x * this.multiples, y * this.multiples, this[prop], style)
        })
        // this.groupOptions1.forEach((item, index) => {
        //     const { x, y, prop, style } = item
        //     if (!['admissionTime', 'status'].includes(prop)) {
        //         let value = ''
        //         if (prop === 'docNo') {
        //             value = this.row.touristList[index][prop].replace(/(\w{3})\w+(\w{3})/, '$1************$2')
        //         } else {
        //             value = this.row.touristList[index][prop]
        //         }
        //         console.log(this.row.touristList, 'this.row.touristList');
                
        //         console.log(value, 'value');
                
        //         this.createBox(ctx, x * this.multiples, y * this.multiples, value, style)
        //     } else {
        //         this.createBox(ctx, x * this.multiples, y * this.multiples, this[prop], style)
        //     }
        // })
        // switch (users.length) {
        //     case 1:
        //         this.topOptions1.forEach((item, index) => {
        //             const { x, y, prop, style } = item
        //             this.createBox(ctx, x * this.multiples, y * this.multiples, this[prop], style)
        //         })
        //         this.groupOptions1.forEach((item, index) => {
        //             const { x, y, prop, style } = item
        //             if (!['admissionTime', 'status'].includes(prop)) {
        //                 let value = ''
        //                 if (prop === 'docNo') {
        //                     value = this.row.touristList[0][prop].replace(/(\d{3})\d{12}(\d{3})/, '$1************$2')
        //                 } else {
        //                     value = this.row.touristList[0][prop]
        //                 }
        //                 this.createBox(ctx, x * this.multiples, y * this.multiples, value, style)
        //             } else {
        //                 this.createBox(ctx, x * this.multiples, y * this.multiples, this[prop], style)
        //             }
        //         })
        //         break
        //     case 2:
        //         this.topOptions2.forEach((item, index) => {
        //             const { x, y, prop, style } = item
        //             this.createBox(ctx, x * this.multiples, y * this.multiples, this[prop], style)
        //         })
        //         this.groupOptions2.forEach((item, index) => {
        //             item.forEach((v) => {
        //                 const { x, y, prop, style } = v
        //                 let value = ''
        //                 if (!['admissionTime', 'status'].includes(prop)) {
        //                     if (prop === 'docNo') {
        //                         value = this.row.touristList[index][prop].replace(/(\d{3})\d{12}(\d{3})/, '$1************$2')
        //                     } else {
        //                         value = this.row.touristList[index][prop]
        //                     }
        //                     this.createBox(ctx, x * this.multiples, y * this.multiples, value, style)
        //                 } else {
        //                     this.createBox(ctx, x * this.multiples, y * this.multiples, this[prop], style)
        //                 }
        //             })
        //         })
        //         break
        //     default:
        //         this.topOptions3.forEach((item, index) => {
        //             const { x, y, prop, style } = item
        //             this.createBox(ctx, x * this.multiples, y * this.multiples, this[prop], style)
        //         })
        //         this.groupOptions3.forEach((item, index) => {
        //             item.forEach((v) => {
        //                 const { x, y, prop, style } = v
        //                 if (prop !== 'admissionTime') {
        //                     let value = ''
        //                     if (prop === 'docNo') {
        //                         value = this.row.touristList[index][prop].replace(/(\d{3})\d{12}(\d{3})/, '$1************$2')
        //                     } else {
        //                         if (this.row.touristList.length >= 3) {
        //                             value = this.row.touristList[index][prop]
        //                         }
        //                     }
        //                     this.createBox(ctx, x * this.multiples, y * this.multiples, value, style)
        //                 } else {
        //                     this.createBox(ctx, x * this.multiples, y * this.multiples, this[prop], style)
        //                 }
        //             })
        //         })
        //         break
        // }
    }
}
